<template>
	<view class="content">
		<view class="title">申请开票</view>
		<view class="box">
			<view>
				<view>您的订单</view>
				<view class="name">故宫纹样手机壳</view>
			</view>
			<view>
				<view>开票金额</view>
				<view class="price">¥ 39.00</view>
			</view>
		</view>
		<view class="box2">
			<view>
				<view>发票类型</view>
				<view>增值税纸质发票</view>
			</view>
			<view>
				<view>抬头类型</view>
				<view class="head-type">
					<view @click="headType1">
						<view :class="headTypeRadio?'red':'radio'">
							<image v-if="headTypeRadio" class="trueimg" src="../../static/dui.png"></image>
						</view>
						<view>个人或事业单位</view>
					</view>
					<view @click="headType2">
						<view :class="!headTypeRadio?'red':'radio'">
							<image v-if="!headTypeRadio" class="trueimg" src="../../static/dui.png"></image>
						</view>
						<view>企业</view>
					</view>
				</view>
			</view>
			<view>
				<view>发票抬头</view>
				<view class="colorHui">
					<input v-model="invoiceHead" maxlength="18" type="text" :placeholder="txt"
						placeholder-class="colorHui" style="width: 400rpx;text-align: right;" />
				</view>
			</view>
			<view v-if="!headTypeRadio">
				<view>税号</view>
				<view class="colorHui">
					<input v-model="taxNumber" maxlength="18" type="text" placeholder="纳税人识别号"
						placeholder-class="colorHui" style="width: 400rpx;text-align: right;" />
				</view>
			</view>
		</view>
		<view class="box3">
			<view>
				<view>发票内容</view>
				<view>
					<view class="red" style="margin-right: 24rpx;">
						<image class="trueimg" src="../../static/dui.png"></image>
					</view>
					<view>明细</view>
				</view>
			</view>
		</view>
		<view class="box4">
			<view>
				<view>收件人姓名</view>
				<view>
					<input v-model="userName" type="text" placeholder="请填写姓名" placeholder-class="colorHui"
						style="width: 160rpx;text-align: right;" />
				</view>
			</view>
			<view>
				<view>收件人手机号</view>
				<view>
					<input v-model="userNumber" maxlength="11" type="number" placeholder="请填写手机号"
						placeholder-class="colorHui" style="width: 210rpx;text-align: right;" />
				</view>
			</view>
			<view>
				<view>地址</view>
				<view class="picker">
					<picker class="pick1" mode="selector" @change="bindPickerChange" :value="index" :range="province">
						<!-- <view class="uni-input">{{province[index]}}</view> -->
						<view class="chose">
							<view>{{proName}}</view>
							<view>
								<image class="sanjiao" src="../../static/sanjiao.png"></image>
							</view>
						</view>
					</picker>
					<picker mode="selector" @change="bindPickerChange2" :value="index2" :range="city">
						<!-- <view class="uni-input">{{city[index2]}}</view> -->
						<view class="chose">
							<view>{{cityName}}</view>
							<view>
								<image class="sanjiao" src="../../static/sanjiao.png"></image>
							</view>
						</view>
					</picker>
				</view>
			</view>
			<view>
				<input v-model="addressDes" type="text" placeholder="详细地址" placeholder-class="bai" class="addressDes" />
			</view>
		</view>
		<view @click="btnStatus?submit():''" :class="btnStatus?'submitbtn':'submitbtn hui'">
			提交申请
		</view>
		<view class="digobg" @click.stop="digoFun" v-if="digoStatus">
			<view class="digobox" @click.stop="stopFun">
				<view class="digobox-title1">提交成功</view>
				<view class="digobox-title2" style="margin-bottom: 16rpx;">我们将会在展览结束后7个工作日内寄出您</view>
				<view class="digobox-title2">开具的纸质发票。</view>
				<view class="digobox-btn" @click.stop="digobtn">好的</view>
			</view>
		</view>
	</view>
</template>

<script>
	document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
		WeixinJSBridge.call('hideOptionMenu');
	});
	import city from '../../static/city.js'
	export default {
		data() {
			return {
				province: [], //省份
				city: [], //城市
				index: 0, //省份下标
				index2: 0, //城市下标
				proName: '请选择', //选中的省份
				cityName: '请选择', //选中的城市
				orderId: '', //订单id
				headTypeRadio: false, //抬头类型
				taxNumber: '', //税号
				invoiceHead: '', //发票抬头
				invoiceContent: '', //发票内容
				userName: '', //收件人姓名
				userNumber: '', //收件人手机号
				address: '', //地址
				addressDes: '', //详细地址
				txt: '填写需要开具发票企业名称',
				digoStatus: false, //显示隐藏弹窗
				btnStatus:false,	//按钮状态
			}
		},
		onLoad(options) {
			console.log(options);
			this.orderId = options.order_id
			for (var i = 0; i < city.city.length; i++) {
				this.province.push(city.city[i].provinceName)
			}
			this.checkOrder()
		},
		methods: {
			// 选择省份
			bindPickerChange: function(e) {
				this.city = []
				this.index2 = 0
				this.index = e.target.value
				console.log(this.province[this.index]);
				this.proName = this.province[this.index]
				if (this.province[this.index] != '北京市' && this.province[this.index] != '天津市' && this.province[this.index] != '上海市' && this.province[this.index] != '重庆市') {
					for (var i = 0; i < city.city[this.index].mallCityList.length; i++) {
						this.city.push(city.city[this.index].mallCityList[i].cityName)
					}
				}else{
					for (var i = 0; i < city.city[this.index].mallCityList.length; i++) {
						for (var j = 0; j < city.city[this.index].mallCityList[i].mallAreaList.length; j++) {
							console.log(city.city[this.index].mallCityList[i].mallAreaList[j]);
							this.city.push(city.city[this.index].mallCityList[i].mallAreaList[j].areaName)
						}
					}
				}
				console.log(this.city);
				this.cityName = '请选择'
			},
			// 选择市区
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index2 = e.target.value
				this.cityName = this.city[this.index2]
			},
			// 单选-个人或事业单位
			headType1() {
				this.headTypeRadio = true
				this.taxNumber = ''
				this.invoiceHead = ''
				this.txt = '填写需要开具发票的姓名'
			},
			// 单选-企业
			headType2() {
				this.headTypeRadio = false
				this.invoiceHead = ''
				this.txt = '填写需要开具发票企业名称'
			},
			// 提交
			submit() {
				let url = 'https://cdn.m2015.cn/wei/2021/ForbiddenCity/index.php?a=add_invoice'
				let data = {
					order_id: this.orderId,
					invoice_type: '增值税纸质发票',
					title_type: this.headTypeRadio,
					number: this.taxNumber,
					invoice_title: this.invoiceHead,
					r_name: this.userName,
					r_tel: this.userNumber,
					r_address: this.proName + this.cityName + this.addressDes,
				}
				if (this.headTypeRadio) {
					data.title_type = '个人或事业单位'
				} else {
					data.title_type = '企业'
				}
				if (!this.invoiceHead) {
					uni.showToast({
						title: "请输入发票抬头",
						icon: 'none'
					})
				} else if (this.headTypeRadio == false && !this.taxNumber) {
					uni.showToast({
						title: "请输入税号",
						icon: 'none'
					})
				} else if (this.headTypeRadio == false && this.taxNumber.length < 18) {
					uni.showToast({
						title: "请输入正确的税号",
						icon: 'none'
					})
				} else if (!this.userName) {
					uni.showToast({
						title: "请输入姓名",
						icon: 'none'
					})
				} else if (!this.userNumber) {
					uni.showToast({
						title: "请输入手机号",
						icon: 'none'
					})
				} else if (this.userNumber.length < 11) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: 'none'
					})
				} else if (this.proName == '请选择' || this.proName == '') {
					uni.showToast({
						title: "请选择省份",
						icon: 'none'
					})
				} else if (this.cityName == '请选择' || this.proName == '') {
					uni.showToast({
						title: "请选择市区",
						icon: 'none'
					})
				} else if (!this.addressDes) {
					uni.showToast({
						title: "请输入地址",
						icon: 'none'
					})
				} else {
					uni.showLoading({})
					this.api.post(url, data).then(res => {
						console.log(res);
						if (res.state == 1) {
							// 隐藏等待
							uni.hideLoading()
							// wx.showToast({
							// 	title: '提交成功',
							// })
							this.digoStatus = true
							this.btnStatus = false
						} else {
							// 隐藏等待
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			// 隐藏弹窗
			digoFun() {
				this.digoStatus = false
			},
			// 隐藏弹窗
			digobtn() {
				this.digoStatus = false
			},
			// 弹窗冒泡阻止
			stopFun() {
				return false
			},
			// 查询该订单是否提交过
			checkOrder(){
				let url = 'https://cdn.m2015.cn/wei/2021/ForbiddenCity/index.php?a=find_invoice'
				let data = {
					order_id: this.orderId,
				}
				uni.showLoading({})
				this.api.post(url, data).then(res => {
					if (res.state == 1) {
						uni.hideLoading()
						this.btnStatus = true
					} else {
						this.btnStatus = false
						// 隐藏等待
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	uni-page-body {
		/* width: 100%;
		height: 100%; */
		width: 100%;
		margin: 0 auto;
		background-image: url(@/static/invoiceBG.png);
		position: relative;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 0 29rpx;
		padding-top: 49rpx;
		padding-bottom: 92rpx;
	}

	.content {
		width: 100%;
		height: 100%;

	}

	.title {
		font-size: 36rpx;
		line-height: 36rpx;
		margin-bottom: 48rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.box {
		border-radius: 50rpx;
		padding: 60rpx 68rpx;
		background-color: #182752;
		margin-bottom: 25rpx;
	}

	.box>view {
		display: flex;
		align-items: center;
	}

	.box>view:nth-child(1) {
		margin-bottom: 20rpx;
	}

	.box>view>view:nth-child(1) {
		font-size: 28rpx;
		color: #aaafb0;
		margin-right: 17rpx;
	}

	.name {
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.price {
		color: #e85a0d;
		font-size: 37rpx;
	}

	.box2 {
		border-radius: 50rpx;
		padding: 60rpx 68rpx;
		background-color: #182752;
		margin-bottom: 25rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.box2>view {
		display: flex;
		justify-content: space-between;
		margin-bottom: 46rpx;
	}

	.box2>view:nth-child(4) {
		margin-bottom: 0;
	}

	.head-type {
		display: flex;
	}

	.head-type>view {
		display: flex;
		align-items: center;
	}

	.head-type>view:nth-child(1) {
		margin-right: 37rpx;
	}

	.radio {
		width: 26rpx;
		height: 26rpx;
		border-radius: 50rpx;
		border: 1px solid #FFFFFF;
		margin-right: 11rpx;
		position: relative;
	}

	.colorHui {
		color: #aaafb0;
	}

	.box3 {
		border-radius: 50rpx;
		padding: 60rpx 68rpx;
		background-color: #182752;
		margin-bottom: 25rpx;
		color: #FFFFFF;
	}

	.box3>view {
		display: flex;
		justify-content: space-between;
	}

	.box3>view>view:nth-child(2) {
		display: flex;
		align-items: center;
	}

	.box4 {
		border-radius: 50rpx;
		padding: 60rpx 68rpx;
		background-color: #182752;
		margin-bottom: 95rpx;
		color: #FFFFFF;

	}

	.box4>view {
		display: flex;
		justify-content: space-between;
		margin-bottom: 46rpx;
	}

	.box4>view:nth-child(4) {
		margin-bottom: 0rpx;
	}

	.picker {
		display: flex;
	}

	.picker>view:nth-child(1) {
		margin-right: 52rpx;
	}

	.bai {
		color: #FFFFFF;
	}

	.addressDes {
		border-bottom: 1px solid #FFFFFF;
		width: 100%;
	}

	.trueimg {
		width: 17rpx;
		height: 13rpx;
		position: absolute;
		top: 50%;
		left: 47%;
		transform: translate(-50%, -50%);
	}

	.red {
		background-color: red !important;
		border-radius: 50rpx !important;
		border: 1px solid red !important;
		width: 26rpx;
		height: 26rpx;
		border-radius: 50rpx;
		margin-right: 11rpx;
		position: relative;
	}

	.btn {
		width: 100%;
		height: 86rpx;
	}

	.chose {
		border-bottom: 1px solid #FFFFFF;
		padding-bottom: 8rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-left: 33rpx;
	}

	.chose>view:nth-child(1) {
		margin-right: 31rpx;
	}

	.sanjiao {
		width: 12rpx;
		height: 7rpx;
		padding-bottom: 8rpx;
	}

	.pick1 {
		margin-right: 52rpx;
	}

	input {
		font-size: 28rpx;
	}

	.digobg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.digobox {
		width: 592rpx;
		height: 588rpx;
		background-color: #f9f9f4;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50rpx;
	}

	.digobox-title1 {
		margin-top: 155rpx;
		font-size: 36rpx;
		line-height: 36rpx;
		color: #182752;
		margin-bottom: 66rpx;
		text-align: center;
	}

	.digobox-title2 {
		font-size: 26rpx;
		line-height: 26rpx;
		text-align: center;
		color: #182752;
	}

	.digobox-btn {
		text-align: center;
		color: #FFFFFF;
		background-color: #e85a0d;
		width: 300rpx;
		height: 82rpx;
		line-height: 82rpx;
		border-radius: 50rpx;
		margin: 0 auto;
		margin-top: 140rpx;
	}
	.hui{
		background-color: #C8C7CC !important;
	}
	.submitbtn{
		color: #FFFFFF;
		background-color: #e85a0d;
		height: 85rpx;
		line-height: 85rpx;
		border-radius: 50rpx;
		text-align: center;
		font-size: 26rpx;
	}
</style>
